<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{admin/adminCommons :: top_head(~{::title})}">
    <title>标签管理</title>
</head>
<body>
<!--导航栏-->
<nav th:replace="~{admin/adminCommons :: top_nav_bar(3)}"></nav><!--中间内容-->
<!--二级导航-->
<div class="ui attached pointing menu">
    <div class="ui container">
        <div id="nav_add_tag_btn" class="item">新增标签</div>
        <a href="#" th:href="@{/admin/tags/1}" class="active teal item">标签列表</a>
    </div>
</div>
<!--中间内容-->
<div class="cus-padding-top-bottom-massive">
    <div class="ui container cus-container-width">
        <div class="ui container">
            <div class="ui teal message" th:unless="${#strings.isEmpty(msg)}" th:text="${msg}">提示信息</div>
            <table class="ui table">
                <thead>
                <tr>
                    <th>id</th>
                    <th>标签名</th>
                    <th>添加时间</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="tag : ${page.list}">
                    <td th:text="${tag.id}">1</td>
                    <td th:text="${tag.name}">分类1</td>
                    <td th:text="${#dates.format(tag.createTime,'yyyy-MM-dd HH:mm:ss')}">时间</td>
                    <td th:text="${#dates.format(tag.updateTime,'yyyy-MM-dd HH:mm:ss')}">时间</td>
                    <td>
                        <div href="#" class="ui mini teal button update_tag_button">
                            编辑
                        </div>
                        <a href="#" th:href="@{/admin/tags/delete/{id}(id=${tag.id})}"
                           class="ui mini red button">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <th colspan="6">
                        <div class="ui pagination menu">
                            <a class="icon item" th:href="
                            @{/admin/tags/{pageNum}(pageNum=${page.pageNum}-1)}"
                               th:unless="${page.isFirstPage}">
                                <i class="iconfont icon-B icon"></i>上一页
                            </a>
                            <div th:each="page:${page.navigatepageNums}" class="ui pagination menu">
                                <a th:href="@{/admin/tags/{pageNum}(pageNum=${page})}" th:text="${page}"
                                   class="item">1</a>
                            </div>
                            <a class="icon item"
                               th:href="@{/admin/tags/{pageNum}(pageNum=${page.pageNum}+1)}"
                               th:unless="${page.isLastPage}">
                                <i class="iconfont icon-B icon"></i>下一页
                            </a>
                        </div>
                        <div id="modal-btn" class="ui right floated teal basic button">添加</div>
                    </th>
                </tr>
                </tfoot>
            </table>
            <div class="ui modal" id="input_tag_modal">
                <div class="header">添加一个新的标签</div>
                <div class="content">
                    <form id="input-tags-form" method="post" class="ui form" th:action="@{/admin/tags/input}">
                        <div class="ui fluid action input">
                            <input type="text" name="tagName" id="tags-input" placeholder="分类名称">
                            <button type="submit" class="ui teal button">添加</button>
                        </div>
                        <div class="ui error message"></div>
                    </form>
                </div>
            </div>
            <div class="ui modal" id="update_tag_modal">
                <div class="header">更新标签信息</div>
                <div class="content">
                    <form id="update-tags-form" method="post" class="ui form" th:action="@{/admin/tags/update}">
                        <div class="ui fluid action input">
                            <input type="hidden" name="tagId" id="tagId">
                            <input type="text" name="tagName" id="tags-update" placeholder="标签名称">
                            <button type="submit" class="ui teal button">更新</button>
                        </div>
                        <div class="ui error message"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!--底部内容-->
<footer th:replace="~{admin/adminCommons :: footer_nav_bar}"></footer>
<script type="text/javascript">
    // 鼠标点击分类弹出下拉菜单
    $('#type-dropdown').dropdown();
    $('#modal-btn').click(function () {
        $('#input_tag_modal').modal('show');
    });

    $('#nav_add_tag_btn').click(function () {
        $('#input_tag_modal').modal('show');
    });
    $('#input-tags-form').form({
        fields: {
            typeName: {
                identifier: 'text',
                rules: [
                    {
                        type: 'empty',
                        prompt: '请输入分类名称！'
                    }
                ]
            }
        }
    })

    $('.update_tag_button').click(function () {
        let id = this.parentElement.parentElement.children[0].innerHTML;
        console.log(id);
        let tagName = this.parentElement.parentElement.children[1].innerHTML;
        console.log(tagName);
        $('#tags-update').val(tagName);
        $('#tagId').val(id);
        $('#update_tag_modal').modal('show');
    })

</script>
</body>
</html>